import React, { Component } from 'react'
import { Button, Modal, Select, Form, Row, Col, Input, DatePicker, message } from 'antd';
import BaseComponent from '@/components/BaseComponent';
const { TextArea } = Input;
import { connect } from 'dva';
import moment from 'moment';
import ReportCard from '@/components/ReportCard';



@connect(({ user }) => ({
    // data: risk.riskData,
    currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
    state = {
        visible: false,
        form: {},
        sgblCodeData: [],
        bmblCodeData: [],
        wblCodeData: [],
        sezcCodeData: [],
        blReportFilePath: undefined
    };

    showModal = () => {
        this.findAllDictName()
        this.findDataById()
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        // this.setState((params) => ({
        //     form: {
        //         ...params.form,
        //         id: this.props.record.id,
        //         skip: '1',
        //         user: this.props.currentUser.id,
        //     }
        // }), () => {
        //     this.updateRecord(this.state.form)
        //     this.setState({
        //         visible: false,
        //     });
        // });
        this.setState({
            visible: false,
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    handleUploadBefore = (file, fileList) => {
        this.setState({ isUploading: true }, () => {
            this.hide = this.loadingMessage('正在上传...');
        });
        return true;
    };
    handleBlUploadChange = ({ info }) => {
        if (info.file.status !== 'uploading') {
            this.setState(
                {
                    fileList: info.fileList,
                },
                () => { }
            );
        }
        if (info.file.status === 'done') {
            const response = info.file.response;
            const {
                data: { filePath, originalFilename },
            } = response;
            const arr = filePath.split('/');
            // 文件前缀
            const prefix = arr[arr.length - 2];
            const url = `${prefix}/${originalFilename}`;

            this.setState((params) => ({
                form: {
                    ...params.form,
                    blReportFilePath: filePath,
                    blReportFileUrl: url,
                },
                isUploading: false,
            }));
            if (this.hide) {
                this.hide();
            }
            this.successMessage('上传成功');
        } else if (info.file.status === 'error') {
            this.errorMessage('文件上传出错,请联系管理员');
        }
    };


    nameChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                name: value
            }
        }));
    }
    sfzChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                sfz: value
            }
        }));
    }

    idChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                id: value
            }
        }));
    }

    phoneChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                phone: value
            }
        }));
    }

    blNumChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                blNum: value
            }
        }));
    }


    blbgTimeChange = (date, dateString) => {
        console.log(date, dateString)
        this.setState((params) => ({
            form: {
                ...params.form,
                blbgTime: dateString
            }
        }));
    }
    sgblCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                sgblCode: value
            }
        }));
    }

    bmblCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                bmblCode: value
            }
        }));
    }

    wblCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                wblCode: value
            }
        }));
    }

    sezcCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                sezcCode: value
            }
        }));
    }

    blzdStaffChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                blzdStaff: value
            }
        }));
    }
    blshStaffChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                blshStaff: value
            }
        }));
    }

    blzdChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                blzd: value
            }
        }));
    }

    //字典
    findAllDictName = () => {
        this.execHttp('treatmentList/findAllDictName').then(resp => {
            if (resp && resp.success) {
                this.setState({
                    sgblCodeData: resp.data.sgbl_code,
                    bmblCodeData: resp.data.bmbl_code,
                    wblCodeData: resp.data.wbl_code,
                    sezcCodeData: resp.data.sezc_code,
                })
            }
        });
    };

    //保存
    updateRecord = (from) => {
        this.execHttp('crowdDataReport/updateRecord', {
            ...from
        }).then(resp => {
            if (resp && resp.success) {
                message.success(resp.message);
                this.props.getDataByPage({})
            } else {
                message.error(resp.message);
            }
        });
    };

    /**详情*/
    findDataById = () => {
        this.execHttp('formalDatabase/findDataById', {
            id: this.props.record.id
        }).then(resp => {
            if (resp && resp.success) {
                this.setState({
                    form: resp.data.response,
                })
                // this.getCity({ level: 2, parentCode: '34' })
                // this.getCity({ level: 3, parentCode: resp.data.response.cityId })
                // this.getCity({ level: 4, parentCode: resp.data.response.districtId })
                // this.getCity({ level: 5, parentCode: resp.data.response.countyId })
            }
        });
    };


    render() {
        const { visible } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };


        return (
            <div style={{ display: "inline-block" }}>
                <Button type="primary" style={{ marginLeft: "10px" }} onClick={this.showModal} >病理</Button>
                <Modal
                    title="病理查看"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={1500}
                >
                    <Form {...formItemLayout} >
                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="姓名">
                                    <Input placeholder="姓名" value={this.state.form.name} disabled
                                        onChange={this.nameChange} style={{ width: 200 }}  />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="身份证">
                                    <Input placeholder="身份证号码" value={this.state.form.sfz} disabled
                                        onChange={this.sfzChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="调查对象ID号">
                                    <Input placeholder="调查对象ID号" value={this.state.form.id} disabled
                                        onChange={this.idChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="电话">
                                    <Input placeholder="电话" value={this.state.form.phone} disabled
                                        onChange={this.phoneChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="病理号">
                                    <Input placeholder="病理号" value={this.state.form.blNum}
                                        onChange={this.blNumChange} style={{ width: 200 }} disabled />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="病理报告日期">
                                    <DatePicker style={{ width: 200 }} disabled showTime format="YYYY-MM-DD"
                                        value={this.state.form.blbgTime === null ? this.state.form.blbgTime : moment(this.state.form.blbgTime, 'YYYY-MM-DD')}
                                        onChange={this.blbgTimeChange} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="食管最高病理诊断">
                                    <Select allowClear value={this.state.form.sgblCode} onChange={this.sgblCodeChange} style={{ width: 200 }} disabled placeholder="请选择食管最高病理诊断代码">
                                        {this.state.sgblCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="贲门最高病理诊断">
                                    <Select allowClear value={this.state.form.bmblCode} onChange={this.bmblCodeChange} style={{ width: 200 }} disabled placeholder="请选择贲门最高病理诊断代码">
                                        {this.state.bmblCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16} >
                            <Col span={6}>
                                <Form.Item label="胃最高病理诊断">
                                    <Select allowClear value={this.state.form.wblCode} onChange={this.wblCodeChange} style={{ width: 200 }} disabled placeholder="请选择胃最高病理诊断代码">
                                        {this.state.wblCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="十二指肠最高病理诊断" >
                                    <Select allowClear value={this.state.form.sezcCode} onChange={this.sezcCodeChange} style={{ width: 200 }} disabled placeholder="请选择十二指肠最高病理诊断代码">
                                        {this.state.sezcCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="病理诊断医师">
                                    <Input placeholder="病理诊断医师" value={this.state.form.blzdStaff}
                                        onChange={this.blzdStaffChange} style={{ width: 200 }} disabled />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="病理审核医师">
                                    <Input placeholder="病理审核医师" value={this.state.form.blshStaff}
                                        onChange={this.blshStaffChange} style={{ width: 200 }} disabled />
                                </Form.Item>
                            </Col>


                        </Row>

                        <Row gutter={16} >
                            <Col span={24}>
                                <Form.Item label="病理诊断" labelCol={{ span: 2, offset: 0 }}>
                                    <TextArea rows={4} placeholder="病理诊断" value={this.state.form.blzd} disabled
                                        onChange={this.blzdChange} />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16}>
                            <Col span={24}>
                                <Form.Item labelCol={{ span: 2, offset: 0 }} label="病理">
                                    <ReportCard
                                        imagePreview={true}
                                        emptyMsg={'暂无病理,请上传病理'}
                                        uploadBtnLabel={'上传病理'}
                                        fileUrl={this.state.form.blReportFileUrl}
                                        isUploading={this.state.isUploading}
                                        beforeUpload={this.handleUploadBefore}
                                        onChange={this.handleBlUploadChange}
                                        onDelClick={this.handleDelBlImage}
                                    ></ReportCard>
                                </Form.Item>
                            </Col>
                        </Row>

                        {/* <Row gutter={16} >
                            <Col span={24}>
                                <Form.Item label="病理报告单" labelCol={{ span: 2, offset: 0 }}>
                                    <Input placeholder="病理报告单" />
                                </Form.Item>
                            </Col>
                        </Row> */}
                    </Form>
                </Modal>


            </div>
        )
    }
}
